Twitter Bootstrap Web Development How-To by 2012

Author:2012
Language: eng
Format: mobi
Publisher: Packt Publishing
Published: 2015-01-12T10:59:01.813014+00:00

You're there!

Take a moment to scan through approximately the next 18 lines of code, and you'll see that the navbar is composed of nested divs, links, and lists, with special classes. These classes serve significant purposes, from positioning and styling to setting up the responsive navigation.

I'll briefly summarize the roles of these classes:

navbar provides the outside containing element for all contents of the navbar.

navbar-inverse calls for a dark navbar background with light font color.

navbar-fixed-top fixes the navbar at the top of the window and lets page content scroll underneath it (this requires padding at the top of the body element. See it in the embedded style sheet in the head of the index.html file.)

navbar-inner provides height, padding, and background color and gradients.

container constrains the width of the navbar contents, centers them within a wide screen, and includes a clearfix so that it will contain floated child elements.

The link tag of class btn btn-navbar provides a button that is hidden via CSS in a wide viewport but which appears in narrower viewports, where it serves as a trigger for drop-down access to the main menu items.

The div of class nav-collapse serves as the containing element for the menu items which are dropped down in narrow-viewport navigation.

The ul tag of the nav class contains the main navigation links which take a user to various pages in a site. This is the region where we'll first start to work!

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.